<template>
  <div>

	<myheader></myheader>
	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				用户名：<input type="text" v-model="username">
			</div>

			<br>

			<div>
				密码：<input type="password" v-model="password">
			</div>

			<div>
				验证码：<input type="text" v-model="code">
				<br>
				<img :src="src" alt="验证码" @click="change_code">
			</div>

			<Button @click="submit">提交</Button>		


		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>
// 组件包含
import myheader from './myheader'
import myfooter from './myfooter'
export default {
  data () {
    return {
		// 面包屑导航
		datas:[{title:'首页',route:{name:'index'}},{title:'注册页面'}],
		msg: "这是一个变量",
		username: '',
		password: '',
		code: '',
		src: 'http://127.0.0.1:8000/mycode/'
    }
  },
  // 定义组件
  components:{
	  'myheader': myheader,
	  'myfooter': myfooter,
  },
  mounted:function(){

   
  
},
  methods:{
	  // 点击切换验证码
      change_code: function () {
        // 生成随机串
        let num = Math.ceil(Math.random() * 10);

        // 将图片链接加上随机参数，将图片刷新
        this.src = this.src + '?random=' + num
	  },
	  
	  // 提交事件
	  submit: function(){
		  // 判断
		  if(this.username == ''){
			//   alert('用户名不能为空')
			  this.$Message('用户名不能为空')
			  return false;
		  }
		  if(this.password == ''){
			//   alert('密码不能为空')
			  this.$Message('密码不能为空')
			  return false;
		  }
		  if(this.code == ''){
			//   alert('验证码不能为空')
			  this.$Message('验证码不能为空')
			  return false;
		  }
		  // 请求后台接口
		  this.axios.get('http://localhost:8000/register/', {
			  params: {
				  username: this.username,
				  password: this.password,
				  code: this.code
				  }
				  }).then((result) =>{
			  console.log(result);
			  this.$Message(result.data.message)
		  })
	  }
     
  }
}


</script>
 
<style>



</style>